<template>
	<div id="CaiPiao">
		<ul>
			<li v-for="(item,index) in allGames" 
				:key="index" 
				class="game"
				@click="pushToView(item.cn)"
			>
				<img :src="'http://192.168.2.245:3000'+item.icon2" />
				<span>{{item.cn}}</span>
			</li>
			<li class="uploadRound" @click="showAddView=true">
  				<i class="el-icon-plus" ></i>
			</li>
		</ul>
		<Add-Game :showAddView="showAddView"></Add-Game>
	</div>
</template>

<script>
	import AddGame from './AddGame'
	export default{
		components:{AddGame},
		data(){
			return{
				showAddView:false
			}
		},
		computed:{
			allGames(){
				return this.$store.getters.allGames;
			}
		},
		created(){
			this.$store.dispatch('loadAllGames');
		},
		methods:{
			pushToView(cn){
				this.$router.push({name:cn})
			}
		}
	}
</script>

<style lang="scss" scoped>
	#CaiPiao{
		width: 100%;
		height: 100%;
		ul{
			width: 100%;
			height: 100%;
			display: flex;
			flex-wrap: wrap;
			li{
				list-style: none;
				width: 100px;
				height: 100px;
				margin-left: 20px;
				i{
					line-height: 100px;
					font-size: 60px;
					width: 100px;
					height: 100px;
					border-radius: 50%;
					border:2px solid #C6C6C6;
				}
			}
			.game{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
</style>